<template>
  <div class="navbar">
    <h2>尊敬的{{ this.mobile }}，欢迎使用本系统！</h2>
    <div class="navbar-menu">
        <el-menu mode="horizontal"
        background-color="#f1af34"
        text-color="#fff"
        active-text-color="#fff">
        <router-link :to="{path:'/member/build',query:{name:this.mobile}}"><el-menu-item index="1">房屋</el-menu-item></router-link>
        <router-link :to="{path:'/member/park',query:{name:this.mobile}}"><el-menu-item index="2">车位</el-menu-item></router-link>
        <router-link :to="{path:'/member/charge',query:{name:this.mobile}}"><el-menu-item index="3">缴费</el-menu-item></router-link>
        <router-link :to="{path:'/member/temporarypark',query:{name:this.mobile}}"><el-menu-item index="4">临时停车</el-menu-item></router-link>
        <router-link :to="{path:'/member/complaint',query:{name:this.mobile}}"><el-menu-item index="5">投诉</el-menu-item></router-link>
        </el-menu>
    </div>
    <el-form label-width="200px">
      <el-form-item label="停车位置">
        <el-input v-model="proTemporarypark.position"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveTemporarypark">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
  
</template>

<script>
import temporaryparkApi from '@/api/pro/temPark'
import memberApi from '@/api/member/member'
export default {
    data(){
        return{
            mobile:"",
            ownerId:"",
            proTemporarypark: {
                position:'',
                ownerId: ''
            },
            //是否禁用按钮
            saveBtnDisabled:false,
            //dev.env.js里的地址
            BASE_API:process.env.BASE_API
            }
    },
    created(){
        this.mobile=this.$route.query.name
        this.getOwner()
    },
    methods: {
        getOwner(){
            memberApi.getOwnerByMobile(this.mobile)
                    .then(response => {
                        this.ownerId = response.data.ownerId
                    })
        },
        saveTemporarypark(){
            this.proTemporarypark.ownerId = this.ownerId
            temporaryparkApi.addTemporarypark(this.proTemporarypark)
                .then(response => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                })
                //刷新页面
                this.$router.push({ path:'/member/temporarypark',query:{name:this.mobile}})
                })
        }
    }
}


</script>


<style type="text/css">
.navbar {
    background-color: #ffffff;
    height: 100px;
    border-radius: 0px !important;
    position: relative;
}
.navbar h2{
    top:0;
    line-height: 60px;
    margin:0;
    left: 10%;
    font-size: 20px;
    color: rgb(0, 0, 0);
}
.navbar-menu{
    position: absolute;
    left: 0%;
    top: 150px;
    height: 100%;
    line-height: 80px;
    background: transparent;
    padding: 0;
    margin: 0;
}

.container-table {
    position: absolute;
    margin-right:0;margin-left:10%;
    
}
</style>